<template>
  <div class="boss">
    <Header v-if="route.meta.isLogin === false" />
    <router-view />
    <Footer v-if="route.meta.isLogin === false" />
  </div>
</template>
<script setup>
import { useRoute } from 'vue-router'
import Header from '@/components/header/login.vue'
import Footer from '@/components/footer/index.vue'

const route = useRoute()
</script>

<style lang="scss">
@import url(/src/assets/css/global.css);

html,
body {
  padding: 0;
  margin: 0;
  font-family: 'Microsoft YaHei', tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
  font-size: 14px;
  color: var(--color-primary-text);
}

html,
body,
#app,
.boss {
  width: 100%;
  height: 100%;
}

html,
body,
div,
ul,
li,
h1,
p,
span {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

::-webkit-scrollbar {
  display: none;
}

:focus {
  outline: none;
}

.el-form {
  &.boss-form {
    background-color: var(--background);
    padding: 20px 0 0 20px;
    margin: 10px 0;
    box-sizing: border-box;

    .el-form-item {
      margin-bottom: 20px;
    }

    // .el-cascader {
    //   width: 180px !important;
    // }
    // .el-form .el-input,
    // .el-range-editor.el-input__wrapper,
    // .el-select .el-input,
    // .el-form .el-select .el-input__wrapper {
    //   width: 200px;
    // }

    .boss_input,
    .el-cascader,
    .el-select {
      width: 200px;
    }
  }

  .el-form-item__label {
    justify-content: flex-start;
  }

  .el-cascader,
  .el-select {
    .el-input {
      height: 40px;
    }
  }

  .boss_input,
  .date_input,
  .tag_input {
    height: 40px;
  }

  .date_input {
    width: 193px !important;
  }
}

.outerTable {
  background-color: var(--background);
  padding: 20px;

  .boss_table {
    margin-top: 20px;
  }
}

.el-descriptions {
  margin-top: 10px;

  .el-descriptions__body {
    .el-descriptions__table {
      &.is-bordered {
        .el-descriptions__cell {
          padding-left: 10px;
        }
      }
    }

    .el-descriptions__label.el-descriptions__cell.is-bordered-label {
      width: auto;
      height: 48px;
      padding-left: 10px;
    }
  }

  .my-label {
    background-color: #fafafa !important;
    color: #909399 !important;
    min-width: 100px !important;
  }

  .my-content {
    color: var(--color-text) !important;
    min-width: 282px !important;
  }

  .status {
    color: #e6a23c !important;
  }
}

.el-dialog {
  .el-dialog__header {
    padding: 20px 0 0 20px;
    margin: 0;
  }

  .el-dialog__body {
    .form {
      .el-select {
        width: 100%;
      }
    }
  }
}

.audit_button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  padding: 14px 0;
  margin-top: 10px;

  .boss_button {
    padding: 6px 28px;
  }
}

.el-upload--picture-card {
  width: 76px;
  height: 76px;

  .img {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .icon {
      width: 25px;
      height: 25px;
    }

    .tip {
      font-size: 12px;
      color: #1989fa;
      line-height: 14px;
      margin-top: 8px;
    }
  }
}

.el-upload-list {
  .el-upload--picture-card {
    width: 146px;
    height: 146px;
  }

  .el-upload-list__item {
    margin: 0 10px 0 0;

    &.is-success {
      width: 146px;
      height: 146px;
    }

    .el-upload-list__item-thumbnail {
      object-fit: cover !important;
    }
  }
}

.proof {
  .el-upload-list--picture-card {
    --el-upload-list-picture-card-size: 76px;
  }

  .el-upload-list__item.is-success {
    &.is-success {
      width: 76px;
      height: 76px;
    }

    width: 76px;
    height: 76px;

    .el-upload-list__item-actions,
    .el-upload-list__item-thumbnail {
      width: 76px;
      height: 76px;
    }
  }
}

.el-image-viewer__canvas {
  width: 600px;
  height: 600px;
  margin: 50px auto;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.avatar-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* el-tabs */
.el-tabs--card > .el-tabs__header .el-tabs__item {
  border-bottom-color: #dcdfe6;
}

.el-tabs__nav {
  background-color: #fff;
}

.el-tabs__item:hover,
.el-tabs__item.is-active {
  color: #1989fa;
}

.el-tabs__header {
  margin: 0;
}

.proof_img {
  width: 36px;
  height: 36px;
}

.tooltip {
  width: 280px !important;
  height: 162px !important;
  /* padding: 16px 15px 20px !important; */
  line-height: 20px;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--border-color);
  font-size: 16px !important;
}

.reason {
  width: 250px;
  height: 80px;
  padding: 10px 15px 0;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  color: var(--span-color-text);
  font-size: 14px;
  line-height: 20px;
}

h4 {
  font-size: 16px;
  line-height: 16px;
}


</style>
